import React, {useMemo, useState} from 'react';
import type {MenuProps} from "antd";
import {Menu, Layout} from "antd";
import {DatabaseOutlined, HomeOutlined} from "@ant-design/icons";
import {useLocation, useNavigate} from "react-router-dom";
import {renderMenuItem} from "@/routes";
const {Sider} = Layout;
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}
// const items: MenuItem[] = [
//     getItem('主页', '/', <HomeOutlined />),
//     getItem('数据管理', 'sub1', <DatabaseOutlined />, [
//         getItem('数据字典', '/cmn/dict')
//     ]),
// ];
// const items:MenuItem[]= renderMenuItem();
function IndexSider() {
    const [collapsed,setCollapsed] = useState<boolean>(false);
    const navigate = useNavigate();
    const {pathname} = useLocation();
    // [
    // getItem("主页","/",<HomeOutlined />),
    // getItem("数据管理","/cmn",<DatabaseOutlined />,[
    //      getItem(undefined,undefined),
    //      getItem("数字字典","/cmn/dict"))
    //  ])
    // ];
    const items:MenuItem[]= useMemo(()=>{
        return renderMenuItem().map((item:any)=>{
            let childrenItem;
            if(item.children){
                // [getItem(undefined,undefined),getItem("数字字典","/cmn/dict"))]
                childrenItem = item.children.filter((v:any)=>!v.isHide).map((item:any)=>{
                    return getItem(item.label,item.path);
                })
            }
            return getItem(item.label,item.path,item.icon,childrenItem);
        });
    },[])
    return (
        <Sider breakpoint={"md"} collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
            <div className="logo">
                <img src={require("@/assets/img/logo.png")} alt=""/>
                <span style={{display: collapsed ? "none" : "inline-block"}}>尚医通管理系统</span>
            </div>
            <Menu onClick={({key})=>{
                // console.log(e.key);
                navigate(key);
            }} theme="dark" defaultSelectedKeys={[pathname]} mode="inline" items={items}/>
        </Sider>
    );
}

export default IndexSider;